<template>
  <view class="mall-container">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 顶部导航栏 -->
    <view class="mall-navbar">
      <view class="navbar-content">
        <view class="nav-left">
          <image src="/static/new/logo.png" mode="scaleToFill" style="width: 74rpx; height: 74rpx;" />
          <text class="nav-title" style="margin-left: 12rpx;">汉菱医疗 </text>
        </view>
        <view class="nav-right">

        </view>
      </view>
    </view>

    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-box">
        <view class="search-icon">🔍</view>
        <input class="search-input" placeholder="搜索商品名称" />
      </view>
      <view class="cart-btn" @click="goToCart">
        <text class="cart-icon">🛒</text>
        <!-- <view class="cart-badge"></view> -->
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="function-menu">
      <view class="menu-card">
        <view class="menu-row">
          <view class="menu-item" @click="goToCategory">
            <view class="menu-icon  ">
              <image src="/static/new/fl.png" class="common_image" />
            </view>
            <text class="menu-text">分类</text>
          </view>
          <view class="menu-item" @click="goToOrder">
            <view class="menu-icon  ">
              <image src="/static/new/dingdan.png" class="common_image" />
            </view>
            <text class="menu-text">订单</text>
          </view>
          <view class="menu-item" @click="goToService">
            <view class="menu-icon ">
              <image src="/static/new/kf.png" class="common_image" />
            </view>
            <text class="menu-text">客服</text>
          </view>
        </view>
        <view class="menu-row">
          <view class="menu-item" @click="goToCoupon">
            <view class="menu-icon  ">
              <image src="/static/new/yhq.png" class="common_image" />
            </view>
            <text class="menu-text">优惠券</text>
          </view>
          <!-- //shdz.png -->
          <view class="menu-item" @click="goToAddress">
            <view class="menu-icon  ">
              <image src="/static/new/shdz.png" class="common_image" />
            </view>
            <text class="menu-text">收货地址</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="product-list">
      <view class="product-card" v-for="(product, index) in productList" :key="index"
        @click="goToProductDetail(product)">
        <view class="product-image">
          <view class="product-placeholder" style="width: 100%; height: 100%">
            <image style="width: 100%; height: 100%" :src="product.goods_image" />
          </view>
        </view>
        <view class="product-info">
          <text class="product-name">{{ product.goods_name }}</text>
          <view class="product-price-row">
            <text class="original-price" v-if="product.goods_price_min">{{
              product.goods_price_min
            }}</text>
            <text class="current-price">¥ {{ product.line_price_min }}</text>
          </view>
          <view class="product-actions">
            <view class="add-cart-btn">加入购物车</view>
            <view class="buy-now-btn">直接购买</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom-tabbar">
      <view class="tab-item" @click="switchTab('health')">
        <image src="/static/tabbar/home.png" class="tab-icon home-icon" />
        <text class="tab-text">首页</text>
      </view>
      <view class="tab-item active">
        <image src="/static/tabbar/shop_active.png" class="tab-icon home-icon" />
        <text class="tab-text">商城</text>
      </view>
      <view class="tab-item" @click="switchTab('consultation')">
        <image src="/static/tabbar/chat.png" class="tab-icon home-icon" />
        <text class="tab-text">健康伙伴</text>
      </view>
      <view class="tab-item" @click="switchTab('profile')">
        <image src="/static/tabbar/me.png" class="tab-icon home-icon" style="width: 54rpx; height: 68rpx;" />
        <text class="tab-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
import * as GoodsApi from '@/api/goods';

export default {
  data() {
    return {
      statusBarHeight: 0,
      productList: [
        // {
        //   id: 1,
        //   name: '医用外科一次性防护口罩100只',
        //   price: '16.00',
        //   originalPrice: '29.00',
        //   loading: false,
        // },
        // {
        //   id: 2,
        //   name: '医用蓝牙设备',
        //   price: '88.00',
        //   originalPrice: '100.00',
        //   loading: true,
        // },
      ],
    };
  },

  async onLoad() {
    this.getSystemInfo();
    const _res = await GoodsApi.recommended();
    console.log('_res=>', _res.data.goodsList);
    _res.data.goodsList.forEach((_r) => {
      this.productList.push(_r);
    });
  },

  methods: {
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync();
      this.statusBarHeight = systemInfo.statusBarHeight || 0;
    },

    switchTab(tab) {
      switch (tab) {
        case 'health':
          uni.redirectTo({
            url: '/pages/health/index',
            success: function () {
            },
            fail: function (err) {
              console.log('跳转失败', err);


            },

          });
          break;
        case 'profile':
          uni.redirectTo({
            url: '/pages/profile/index',
            success: function () {
            },
            fail: function (err) {
              console.log('跳转失败', err);


            },
          });
          break;
        case 'consultation':
          uni.redirectTo({
            url: '/pages/consultation/index',
            success: function () {
            },
            fail: function (err) {
              console.log('跳转失败', err);


            },
          });
          break;
      }
    },

    // 跳转到购物车
    goToCart() {
      uni.navigateTo({
        url: '/pages/cart/index',
      });
    },

    // 跳转到分类页面
    goToCategory() {
      uni.navigateTo({
        url: '/pages/category/index',
      });
    },

    // 跳转到订单页面
    goToOrder() {
      uni.navigateTo({
        url: '/pages/order/index',
      });
    },

    // 跳转到客服
    goToService() {
      uni.showToast({
        title: '客服功能',
        icon: 'none',
      });
    },

    // 跳转到优惠券页面
    goToCoupon() {
      uni.navigateTo({
        url: '/pages/my-coupon/index',
      });
    },

    // 跳转到收货地址页面
    goToAddress() {
      uni.navigateTo({
        url: '/pages/address/index',
      });
    },

    // 跳转到商品详情页
    goToProductDetail(product) {
      this.$navTo('pages/goods/detail', { goodsId: product.goods_id });
      // uni.navigateTo({
      //   url: `/pages/goods/detail?id=${product.goods_id}`,
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.mall-container {
  min-height: 100vh;
  background: #f5f5f5;
  position: relative;
  padding-bottom: 200rpx;
}

.status-bar {
  background: #4ecdc4;
}

.mall-navbar {
  background: #4ecdc4;
  padding: 16rpx 32rpx;

  .navbar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .nav-left {
      display: flex;
      align-items: center;

      .nav-icon {
        width: 74rpx;
        height: 74rpx;
        // font-size: 36rpx;
        color: #ffffff;
        margin-right: 16rpx;
      }

      .nav-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #ffffff;
      }
    }

    .nav-right {
      display: flex;
      align-items: center;

      .nav-action-btn {
        width: 60rpx;
        height: 60rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16rpx;

        .action-dots,
        .action-location {
          font-size: 24rpx;
          color: #ffffff;
        }
      }
    }
  }
}

.search-section {
  background: #4ecdc4;
  padding: 0 32rpx 16rpx 32rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;

  .search-box {
    flex: 1;
    background: #ffffff;
    border-radius: 32rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;

    .search-icon {
      font-size: 28rpx;
      color: #999999;
      margin-right: 12rpx;
    }

    .search-input {
      flex: 1;
      font-size: 28rpx;
      color: #333333;
    }
  }

  .cart-btn {
    position: relative;
    width: 60rpx;
    height: 60rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    .cart-icon {
      font-size: 28rpx;
      color: #ffffff;
    }

    .cart-badge {
      position: absolute;
      top: -8rpx;
      right: -8rpx;
      background: #ff4444;
      color: #ffffff;
      font-size: 20rpx;
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.function-menu {
  padding: 32rpx;

  .menu-card {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

    .menu-row {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 32rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .menu-item {
        flex: 1;
        max-width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .menu-icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 16rpx;
          font-size: 32rpx;

          &.category-icon {
            background: #e3f2fd;
            color: #2196f3;
          }

          &.order-icon {
            background: #e3f2fd;
            color: #2196f3;
          }

          &.service-icon {
            background: #fff8e1;
            color: #ffc107;
          }

          &.coupon-icon {
            background: #fff3e0;
            color: #ff9800;
          }

          &.address-icon {
            background: #e8f5e8;
            color: #4caf50;
          }
        }

        .menu-text {
          font-size: 24rpx;
          color: #333333;
          text-align: center;
        }
      }
    }
  }
}

.product-list {
  padding: 0 32rpx;

  .product-card {
    background: #ffffff;
    border-radius: 24rpx;
    margin-bottom: 24rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    position: relative;

    .product-image {
      width: 100%;
      height: 400rpx;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;

      .product-placeholder {
        color: #999999;
        font-size: 28rpx;
      }
    }

    .product-info {
      padding: 32rpx;

      .product-name {
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        margin-bottom: 16rpx;
        display: block;
      }

      .product-price-row {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;

        .original-price {
          font-size: 24rpx;
          color: #999999;
          text-decoration: line-through;
          margin-right: 16rpx;
        }

        .current-price {
          font-size: 32rpx;
          font-weight: bold;
          color: #ff4444;
        }
      }

      .product-actions {
        display: flex;
        gap: 16rpx;

        .add-cart-btn {
          flex: 1;
          height: 72rpx;
          background: #e3f2fd;
          color: #2196f3;
          border-radius: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          font-weight: 500;
        }

        .buy-now-btn {
          flex: 1;
          height: 72rpx;
          background: #ff4444;
          color: #ffffff;
          border-radius: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28rpx;
          font-weight: 500;
        }
      }
    }

    .loading-btn {
      position: absolute;
      bottom: 32rpx;
      right: 32rpx;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 50%;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .loading-text {
        font-size: 20rpx;
        color: #999999;
      }
    }
  }
}

.bottom-tabbar {
  padding-top: 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  // height: 50px;
  background: #ffffff;
  display: flex;
  align-items: center;
  border-top: 1px solid #e5e5e5;
  padding-bottom: env(safe-area-inset-bottom);

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tab-icon {
      width: 72rpx;
      height: 72rpx;
      margin-bottom: 8rpx;
      border-radius: 8rpx;

      &.home-icon {
        // background: #2196f3;
      }

      &.mall-icon {
        background: #cccccc;
      }

      &.consultation-icon {
        background: #cccccc;
      }

      &.profile-icon {
        background: #cccccc;
      }
    }

    .tab-text {
      font-size: 36rpx;
      color: rgb(153, 153, 153);
    }

    &.active .tab-text {
      color: #006BFF;
    }
  }
}

.common_image {
  width: 76rpx;
  height: 76rpx;
}
</style>
